<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>前端路由实现</title>
    <link rel="stylesheet" href="./index.css">
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
    <link href="http://cdn.staticfile.org/foundation/6.0.1/css/foundation.css" rel="stylesheet">
    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.js"></script>
    <script src="http://libs.baidu.com/backbone/0.9.2/backbone.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <style>
        .warp{
            width:400px;
            height:400px;
            border:1px solid grey;
            margin:0 auto;
        }
        .nav{
            border-bottom:1px solid grey;
        }
        .nav li{
            display:inline-block;
            list-style:none;
        }
        .nav li a{
            display:inline-block;
            text-decoration: none;
            padding:10px 15px;
        }
        .router{
            padding:20px;
        }
        a{
            cursor: pointer;
        }
        .red {
            color: red
        }

        .blue {
            color: blue
        }
        body{
            padding-bottom: 100px;
        }
        div {
        color: blue;
        background: red;
        width: 400px;
        line-height: 100px;
        text-align:center;
        margin: 40px;
    }
    </style>
    <div>1123123123</div>
</head>
<body>
    <section class="warp">
        <div class="nav">          
            <ul>
                <li><a href="javascript:void(0)" data-path="index">首页</a></li> 
                <li><a href="javascript:void(0)" data-path="news">新闻</a></li>
                <li><a href="javascript:void(0)" data-path="about">关于</a></li>
            </ul>
        </div>
        <div id="router" class="router">
            <!-- 内容加载区域 -->
        </div>
    </section>

    <section>
        <div class="red blue">1</div>
        <div class="blue red">2</div>
    </section>

    <section>
        <div class="wp">
            <div class="child child-width">edm!edm!</div>
        </div>
    </section>

    <section>
        <div class="wp">
            <div class="wp-inner">
                <div class="box">123123</div>
            </div>
        </div>
    </section>

    <section>
        <button>123</button>
        <div class="child box-shadow pre blurry-text">12312331231221312312312321312312</div>

        <div class="loading"></div>

        <div class="chat-bubble chat-bubble-arrow-border chat-bubble-arrow" id="chat-bubble">
        </div>
        
        <ul>
            <li>这里是1000个节点</li>
            <li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li><li>这里是1000个节点</li>
        </ul>
    </section>
    <div>di varagradi vh 1</div>
    <div>paragraph 2</div>
    <!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
    <!-- <script src="./router.js"></script> -->
        <!-- // jsonp/index.html
    <script>
        function jsonpCallback(data) {
            alert('获得 X 数据:' + data.x);
        }
    </script>
    <script src="http://127.0.0.1:3000?callback=jsonpCallback"></script> -->
    <script src="./train.js"></script>
</body>
</html>
